@font-face {
    font-family: 'Zenzai';
    src: url(Fonts/Zenzai\ Itachi.ttf);
         
}

body
{
    display: flex;
    justify-content: center;
    background-color: black;
    background: url(images/chine.jpg);
    background-size: cover;
}


    .bloc_page
    {
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center; 
    }

    header
    {
        height: 20%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .lanterne1
    {
        height: 100%;
        width: 20%;
        background: url(images/lanterne.gif);
        background-size: 100% 100%;
    }

    .lanterne2
    {
        height: 100%;
        width: 20%;
        background: url(images/lanterne.gif);
        background-size: 100% 100%;
        transform: rotateY(180deg);      
    }

    h1
    {
        color: black;
        font-family: 'Zenzai';
        font-weight: bolder;
        font-size: 5em;
    }

    h1>span
    {
        color: pink;
        -webkit-text-stroke: 0.1px;
        -webkit-text-stroke-color: black;
    }


    .sect_lecture
    {
        display: flex;
        flex-direction: row;
        justify-content:space-around;
        align-items: flex-start;
        height: 25%;
        width: 40%;
        column-gap: 5%;
    }

        .lecture1
        {
            background: linear-gradient(rgba(123, 56, 123, 0.423), white);
            width: 30%;
            height: 100%;  
            border: thick double gold;
            border-radius: 0% 500% 0% 500%;
            display: flex;
            justify-content: center;
            align-items: center;  
            overflow: hidden;
        }

        .lecture2
        {
            background: linear-gradient(rgba(123, 56, 123, 0.423), white);
            width: 30%;
            height: 100%;  
            border: thick double gold;
            border-radius: 500% 0% 500% 0%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        
        .yeux1
        {
            background: linear-gradient(white, red);
            border: 1mm ridge gold;
            border-radius: 90% 90% 90% 100%;
            height: 60%;
            width: 10%;
            display: flex;
            justify-content: end;
            align-items: center;
        }

        .pupille1
        {
            background-color: white;
            height: 25%;
            width: 25%;
            border-radius: 100%;
            border: 0.5mm ridge black;
        }



    .main
    {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

       

        .gestion1
        {
            height: 100%;
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            margin-left: 1em;
        }

            .touches1
            {
                height: 100%;
                width: 65%;
                display: grid;
                grid-template-columns: 1fr 1fr 0.5fr 1fr 1fr;
                grid-template-rows: 1fr 1fr 2fr;
                background-image: url(images/star.gif);
                background-size: 100% 100%; 
            }

                #precedente
                {
                    background-color: black;
                    border: thick double gold;
                    border-radius: 100% 100% 0% 100%;
                    height: 100%;
                    width: 100%;
                    grid-area: 2/1/3/2;
                    display: flex;
                    justify-content: center;
                    align-items: center;    
                }

                #precedente:hover
                {
                    filter: brightness(10);
                    transition: all 1s ease;
                    transform: scale(1.3);
                }

                .fa-backward-fast
                {
                    color: rgb(139, 0, 28);
                    font-size: 2.2em;
                }
                

                #stop
                {
                    background-color: black;
                    border: thick double gold;
                    border-radius: 100% 100% 0% 100%;
                    height: 100%;
                    width: 100%;
                    grid-area: 1/2/2/3;
                    display: flex;
                    justify-content: center;
                    align-items: center;   
                }

                #stop:hover
                {
                    filter: brightness(10);
                    transition: all 1s ease;
                    transform: scale(1.3);
                }

                .fa-stop
                {
                    color: rgb(139, 0, 28);
                    font-size: 2.5em;
                }


                #pause
                {
                    background-color: black;
                    border: thick double gold;
                    border-radius: 100% 100% 100% 0%;
                    height: 100%;
                    width: 100%;
                    grid-area: 1/4/2/5;
                    display: flex;
                    justify-content: center;
                    align-items: center;   
                }

                #pause:hover
                {
                    filter: brightness(10);
                    transition: all 1s ease;
                    transform: scale(1.3);
                }

                .fa-pause
                {
                    color: rgb(139, 0, 28);
                    font-size: 2.5em;
                }

                #suivante
                {
                    background-color: black;
                    border: thick double gold;
                    border-radius: 100% 100% 100% 0%;
                    height: 100%;
                    width: 100%;
                    grid-area: 2/5/3/6;
                    display: flex;
                    justify-content: center;
                    align-items: center;   
                }

                #suivante:hover
                {
                    filter: brightness(10);
                    transition: all 1s ease;
                    transform: scale(1.3);
                }

                .fa-forward-fast
                {
                    color: rgb(139, 0, 28);
                    font-size: 2.2em;
                    
                }

                #play
                {
                    background-color: black;
                    border: thick double gold;
                    border-radius: 100% 100% 100% 100%;
                    height: 100%;
                    width: 100%;
                    display: flex;
                    grid-area: 3/2/4/5;
                    justify-content: center;
                    align-items: center;  
                }

                #play:hover
                {
                    transition: all 1s ease;
                    transform: scale(1.3);
                }

                .fa-play
                {
                    color: rgb(139, 0, 28);
                    font-size: 4.5em;
                }

                .fa-play:hover
                {
                    filter: brightness(10);
                    transition: all 1s ease;
                    transform: scale(1.3);
                }



                .moustache
                {
                    height: 100%;
                    width: 40%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;           
                }
        
                .poil1
                {
                    height: 1.5%;
                    width: 40%;
                    background-color: gold;
                    border-radius: 40%;
                    justify-self: self-start;
                    align-self: self-start;
                    transform: rotate(20deg);
                    filter: brightness(100); 
                                        
                }  
                               

                .poil3
                {
                    height: 1.5%;
                    width: 40%;
                    background-color: gold;
                    border-radius: 40%;
                    justify-self: self-start;
                    align-self: self-start;
                    transform: rotate(20deg);
                    filter: brightness(100);                       
                }

                .poil2
                {
                    height: 1.5%;
                    width: 40%;
                    background-color: gold;
                    border-radius: 40%;
                    justify-self: self-end;
                    align-self: self-end;
                    transform: rotate(-20deg);
                    filter: brightness(100);  
                }

                .poil3
                {
                    height: 1.5%;
                    width: 40%;
                    background-color: gold;
                    border-radius: 40%;
                    justify-self: self-start;
                    align-self: self-start;
                    transform: rotate(200deg);
                    margin-top: 2.5%;
                    filter: brightness(100);                      
                }

                .poil4
                {
                    height: 1.5%;
                    width: 40%;
                    background-color: gold;
                    border-radius: 40%;
                    justify-self: self-end;
                    align-self: self-end;
                    transform: rotate(-20deg);
                    filter: brightness(100); 
                }

                .poil5
                {
                    height: 1.5%;
                    width: 40%;
                    background-color: gold;
                    border-radius: 40%;
                    justify-self: self-start;
                    align-self: self-start;
                    transform: rotate(10deg);
                    margin-top: 5%; 
                    filter: brightness(100);                      
                }

                .poil6
                {
                    height: 1.5%;
                    width: 40%;
                    background-color: gold;
                    border-radius: 40%;
                    justify-self: self-end;
                    align-self: self-end;
                    transform: rotate(-10deg);
                    filter: brightness(100); 
                }
        
                .nez
                {
                    height: 5%;
                    width: 8%;
                    background: red;
                    border-radius: 50% 50% 100% 100%;
                    display: flex;
                    align-self: center;
                    justify-self: center;
                    justify-content: center;
                    align-items: center;
                    border: thick double gold;
                    margin-bottom: 5%;
                    overflow: hidden;
                }

                .nez:hover
                {
                    transition: all 1s ease;
                    transform: scale(1.8);
                    background-color: red;
                    
                }


                .fa-microphone
                {
                    color: black;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: red;
                }            

                .bouche
                {
                    height: 15%;
                    width: 40%;
                    background: linear-gradient(rgba(123, 56, 123, 0.423), white);
                    border: thick double gold;
                    border-radius: 0% 0% 100% 100%;                   
                }

            .gestion2
        {
            height: 100%;
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-end;
            margin-right: 1em;
        }

        .touches2
        {
            height:100%;
            width: 65%;
            display: grid;
            grid-template-columns: 1fr 1fr 0.5fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 2fr;
            background-image: url(images/star.gif);
            background-size: 100% 100%;
            
        }


        .repeat
                {
                    background-color: black;
                    border: thick double gold;
                    border-radius: 100% 100% 0% 100%;
                    height: 100%;
                    width: 100%;
                    grid-area: 2/1/3/2;
                    display: flex;
                    justify-content: center;
                    align-items: center;    
                }

                .repeat:hover
                {
                    filter: brightness(10);
                    transition: all 1s ease;
                    transform: scale(1.3);
                }

                .fa-arrows-rotate
                {
                    color: rgb(139, 0, 28);
                    font-size: 2.5em;
                }


                .random
                {
                    background-color: black;
                    border: thick double gold;
                    border-radius: 100% 100% 0% 100%;
                    height: 100%;
                    width: 100%;
                    grid-area: 1/2/2/3;
                    display: flex;
                    justify-content: center;
                    align-items: center;   
                }

                    .random:hover
                    {
                        filter: brightness(10);
                        transition: all 1s ease;
                        transform: scale(1.3);
                    }

                    .fa-shuffle
                    {
                        color: rgb(139, 0, 28);
                        font-size: 2.5em;
                    }


                .mute
                {
                    background-color: black;
                    border: thick double gold;
                    border-radius: 100% 100% 100% 0%;
                    height: 100%;
                    width: 100%;
                    grid-area: 1/4/2/5;
                    display: flex;
                    justify-content: center;
                    align-items: center;   
                }

                    .mute:hover
                    {
                        filter: brightness(10);
                        transition: all 1s ease;
                        transform: scale(1.3);
                    }

                    .fa-volume-xmark
                    {
                        color: rgb(139, 0, 28);
                        font-size: 2.5em;
                    }



                .grrr
                {
                    background-color: black;
                    border: thick double gold;
                    border-radius: 100% 100% 100% 0%;
                    height: 100%;
                    width: 100%;
                    grid-area: 2/5/3/6;
                    display: flex;
                    justify-content: center;
                    align-items: center;   
                }

                    .grrr:hover
                    {
                        filter: brightness(10);
                        transition: all 1s ease;
                        transform: scale(1.3);
                    }

                    .fa-paw
                    {
                        color: rgb(139, 0, 28);
                        font-size: 2.5em;               
                    }

                   

                .vol
                {
                    background-color: black;
                    border: thick double gold;
                    border-radius: 100% 100% 100% 100%;
                    height: 100%;
                    width: 100%;
                    display: flex;
                    grid-area: 3/2/4/5;
                    justify-content: center;
                    align-items: center;                                     
                }
                
                    @keyframes eau
                    
                    {
                        0% 
                        {
                            background-size: cover;
                            background-position-y: 0%;
                        }
                      
                        100% 
                        {
                            background-size: cover;
                            background-position-y: 700%;
                        }
                    }

                    .vol:hover
                    {
                        transition: all 1s ease;
                        transform: scale(1.3);                        
                    }

                    .fa-volume-high
                    {
                        color: rgb(139, 0, 28);
                        font-size: 4em;
                    }

                    .fa-volume-high:hover
                    {
                        filter: brightness(10);
                        transition: all 1s ease;
                        transform: scale(1.3);
                    }


        .nav
        {
            height: 50%;
            width: 98%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            background-color: transparent;
            position: relative;
            margin-top: 1em;
            overflow: hidden;  
        }

        .dj
        {
            height: 90%;
            width: 10%;
            border-radius: 40%;
            border: thick double black;
            position: absolute;
            z-index: 1;
 
        }

        #chatdj
        {
            height: 90%;
            width: 100%;
            border-radius: 40%;
        }

        .caroussel
        {
            height: 94%;
            width: 99%;
            border: thick double black; 
            background-color: rgba(255, 217, 0, 0.536);
            position: absolute;
            transform: translateY(80%);
            transition: all 1.5s ; 
            display: flex;       
            justify-content: space-around; 
            align-items: center;  
        }

        .titre
        {
            height: 80%;
            width: 10%;
            background-color: pink;
            border-radius: 10%;
            border: thick double black;          
        }
        .triche
        {
            height: 80%;
            width: 10%;
            background-color: pink;
            border-radius: 10%;
            border: thick double black;          
        }

        #titre5
        {
            visibility: hidden;
        }

        #titre1
        {
            background-image: url(images/wall5.jpg);
            background-size: 100% 100%;
            transition: all 1s ease;
        }

            #titre1:hover
            {
                transition: all 1s ease;
                transform: scale(0.8);
            }

        #titre2
        {
            background-image: url(images/flamenco.jpg);
            background-size: 100% 100%;
        }

            #titre2:hover
            {
                transition: all 1s ease;
                transform: scale(0.8);
            }

        #titre3
        {
            background-image: url(images/guitare.jpg);
            background-size: 100% 100%;
        }

            #titre3:hover
            {
                transition: all 1s ease;
                transform: scale(0.8);
            }

        #titre4
        {
            background-image: url(images/pekin.jpg);
            background-size: 100% 100%;
        }

            #titre4:hover
            {
                transition: all 1s ease;
                transform: scale(0.8);
            }

        #titre6
        {
            background-image: url(images/zen.jpg);
            background-size: 100% 100%;
        }

            #titre6:hover
            {
                transition: all 1s ease;
                transform: scale(0.8);
            }

        #titre7
        {
            background-image: url(images/oriental2.jpg);
            background-size: 100% 100%;
        }

            #titre7:hover
            {
                transition: all 1s ease;
                transform: scale(0.8);
            }

        #titre8
        {
            background-image: url(images/music1.jpg);
            background-size: 100% 100%;
        }

            #titre8:hover
            {
                transition: all 1s ease;
                transform: scale(0.8);
            }

        #titre9
        {
            background-image: url(images/oud.jpg);
            background-size: 100% 100%;
        }

            #titre9:hover
            {
                transition: all 1s ease;
                transform: scale(0.8);
            }